import { useState } from 'react';
import style from './App.module.css';
import TextButton from './components/TextButton/TextButton';
import { Avatar } from "antd";
import { UserOutlined } from '@ant-design/icons';

interface userInfo{
    userName:string,
    role:'用户' | '管理员' | '终端' | '未登录',
    createDate:Date,
}

// eslint-disable-next-line @typescript-eslint/no-explicit-any
export default function App(){
    const [getdarkMode,setDarkMode]=useState(false);
    const [getUserInfo,setUserInfo]=useState({
        userName:'未登录',
        role:'用户',
        createDate:'2025-10-29'
    });
    
    return (
        <div className={style.container} style={{
            backgroundColor:getdarkMode?' rgba(0, 0, 0, 0.85)':' rgba(255, 255, 255, 0.85)',
            color:getdarkMode?' rgba(255, 255, 255, 0.85)':' rgba(0, 0, 0, 0.85)'
            }}>
                <div className={style.header}>
                    <TextButton darkMode={getdarkMode} onClick={darkModeChange}>{getdarkMode?'暗黑模式':'白天模式'}</TextButton>
                    <TextButton darkMode={getdarkMode}>详情</TextButton>
                    <TextButton darkMode={getdarkMode}>说明</TextButton>
                    <TextButton darkMode={getdarkMode}>帮助</TextButton>
                    <TextButton darkMode={getdarkMode}>关于我们</TextButton>
                    <TextButton darkMode={getdarkMode}>其他</TextButton>
                </div>

                <div className={style.leftSide}>
                    <div className={style.statusBoard}>
                        <Avatar size={96} shape="circle" icon={<UserOutlined />} alt='加载失败' />
                        <div className={style.statusDisplay}>
                            <span>{getUserInfo.userName}</span>
                            <span>{getUserInfo.role}</span>
                            <span>{getUserInfo.createDate}</span>
                            <TextButton darkMode={getdarkMode} onClick={updateUserInfo}></TextButton>
                        </div>
                    </div>
                </div>

                <div className={style.main}>

                </div>

                <div className={style.rightSide}>

                </div>

                <div className={style.footer}>
                    everything is alright
                </div>
            
        </div>
    )

    function darkModeChange(){
        setDarkMode(!getdarkMode)
    }
    function updateUserInfo(){
        setUserInfo({
            ...getUserInfo,
            userName:'Sherry',
            createDate:'2022-9-11'
        })
    }
}

